
<template>
    <div>
        <div style="width: 100%;" v-show="worklog==1">
            <el-page-header @back="goBack" content="收票登记列表"></el-page-header>
            <el-divider></el-divider>
            <el-form :inline="true" :model="voiceReceiveInfo">
                <el-form-item>
                    <el-input v-model="voiceReceiveInfo.invoiceNo" placeholder="发票号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-col :span="11">
                        <el-input type="number" v-model="voiceReceiveInfo.invoiceAmount" placeholder="发票金额"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input type="number" v-model="voiceReceiveInfo.rname"></el-input>
                    </el-col>
                </el-form-item>
                <input type="hidden" v-model="voiceReceiveInfo.pId" />
                <el-form-item style="margin-left: 20px">
                        <el-input v-model="voiceReceiveInfo.projectName" @focus="pid" placeholder="项目名称" clearable></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-select v-model="voiceReceiveInfo.incomeCompanyId" placeholder="收款单位">
                        <el-option value=" " label="收款单位"></el-option>
                        <el-option
                                :key="receiveCompany.id"
                                v-for="receiveCompany in receiveCompanys"
                                :value="receiveCompany.id"
                                :label="receiveCompany.receiveCompanyName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-select v-model="voiceReceiveInfo.payCompanyId">
                        <el-option value=" " label="付款单位"></el-option>
                        <el-option
                                :key="openCompany.id"
                                v-for="openCompany in openCompanys"
                                :value="openCompany.id"
                                :label="openCompany.openCompanyName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="voiceReceiveInfo.invoiceType" placeholder="发票类型"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="voiceReceiveInfo.editer" placeholder="填报人"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-select placeholder="审批状态" v-model="voiceReceiveInfo.comment">
                        <el-option label="审批状态" value></el-option>
                        <el-option label="审批中" value="审批中"></el-option>
                        <el-option label="审批不通过" value="审批不通过"></el-option>
                        <el-option label="审批通过" value="审批通过"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="voiceReceiveInfosList">查询</el-button>
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                    <el-button type="primary" @click="dy">打印</el-button>
                </el-form-item>
            </el-form>

            <el-table id="out-table" :data="voiceReceiveInfos.slice((currentPage-1)*pagesize,currentPage*pagesize)">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="发票号码" prop="invoiceNo"></el-table-column>
                <el-table-column label="开票类型" prop="openType"></el-table-column>
                <el-table-column label="发票类型" prop="invoiceType"></el-table-column>
                <el-table-column label="发票金额" prop="invoiceAmount"></el-table-column>
                <el-table-column label="项目名称" prop="pname"></el-table-column>
                <el-table-column label="收款单位" prop="rname"></el-table-column>
                <el-table-column label="付款单位" prop="oname"></el-table-column>
                <el-table-column label="填报人" prop="editer"></el-table-column>
                <el-table-column label="日期" prop="openDate"></el-table-column>
                <el-table-column label="流程状态" prop="approveStatus">
                    <template slot-scope="scope">
                        <span style="color: orange;font-weight: 700" v-if="scope.row.comment=='审批中'">审批中</span>
                        <span style="color: red;font-weight: 700" v-if="scope.row.comment=='审批不通过'">审批不通过</span>
                        <span style="color: green;font-weight: 700" v-if="scope.row.comment=='审批通过'">审批通过</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <el-button type="primary">
                                操作
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="getByIdAll(scope)">查看详情</el-dropdown-item>
                                <el-dropdown-item @click.native="updateIno(scope)">修改</el-dropdown-item>
                                <el-dropdown-item @click.native="delByid(scope)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10,15,20,25]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="voiceReceiveInfos.length"
            >//这是显示总共有多少数据</el-pagination>
        </div>
        <!--所属项目子组件-->
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <project-info-list v-if="dialogVisible" @row="project"></project-info-list>
        </el-dialog>
        <invoiceReceUpdate :voiceReceiveI="voiceReceiveI" :worklog="worklog" :disableds="disableds" :securitychecks="securitychecks" @conls="conls" @update="update"  v-if="worklog==2"></invoiceReceUpdate>
    </div>
</template>

<script>
    import {OpenCompanySeriver} from "../../../model/gsl/OpenCompanySeriver";
    const  open=OpenCompanySeriver.getInstance();
    import {ReceiveCompanySeriver} from "../../../model/gsl/ReceiveCompanySeriver";
    const  rece=ReceiveCompanySeriver.getInstance();
    import {InvoiceReceiveInfoSrvice} from "../../../model/gsl/InvoiceReceiveInfoSrvice";
    const  inv=InvoiceReceiveInfoSrvice.getInstance();
    import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
    const attachemenInfoService = AttachemenInfoService.getInstance();
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    import ProjectInfoList from "../../common/projectInfo/ProjectInfoList";
    import invoiceReceUpdate from "../../gsl/InvoiceReceiveInfo/InvoiceReceiveInfoUpdate"
    export default {
        components: {ProjectInfoList,invoiceReceUpdate},

        name: "InvoiceReceiveInfoAdd",
        data() {
            return {
                openCompanys:[],
                receiveCompanys:[],
                voiceReceiveInfo: {},
                voiceReceiveI: {},
                voiceReceiveInfos: [],
                dialogVisible: false, //隐藏子组件
                currentPage: 1, //初始页
                pagesize: 10, //    每页的数据
                worklog: 1,
                disableds:false,
                securitychecks:[],
            };
        },
        methods: {
            getByIdAll(a){
                this.voiceReceiveI=a.row;
                this.securitychecks=[]
                attachemenInfoService.getById(this.voiceReceiveI.attachIds).then(re => {
                    re.data.data.forEach(item=>{
                        this.securitychecks.push({
                            fileName:item.fileName,
                            uploadPerson:this.voiceReceiveI.editer,
                            uploadDate:item.uploadDate,
                            filePath:item.filePath
                        })
                    })
                    this.disableds=true;
                    this.worklog=2
                });
            },
            updateIno(a){
                this.voiceReceiveI=a.row;
                this.securitychecks=[]
                attachemenInfoService.getById(this.voiceReceiveI.attachIds).then(re => {
                    re.data.data.forEach(item=>{
                        this.securitychecks.push({
                            fileName:item.fileName,
                            uploadPerson:this.voiceReceiveI.editer,
                            uploadDate:item.uploadDate,
                            filePath:item.filePath
                        })
                    })
                    this.disableds=false;
                    this.worklog=2
                });
            },
            conls(a){
              this.worklog=a;
            },
            delByid(a){
                inv.remove(a.row.id).then((re)=>{
                    if (re.data.data==1){
                        this.$message.success("删除成功!");
                        this.voiceReceiveInfosList();
                    } else {
                        this.$message.error("删除失败!");
                    }
                })
            },
            getopenCompany(){
                open.list(null).then((re)=>{
                    this.openCompanys=re.data.data;
                })
            },
            getreceiveCompanys(){
                rece.list(null).then((re)=>{
                    this.receiveCompanys=re.data.data;
                })
            },
            //开启隐藏项目子组件
            pid() {
                this.dialogVisible = true;
            },
            //响应项目组件
            project(row) {
                this.voiceReceiveInfo.pId = row.id;
                this.voiceReceiveInfo.projectName = row.projectName;
                this.dialogVisible = false;
            },

            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function(size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
            },
            //返回
            goBack() {
                history.back();
            },
            //查询收票登记信息
            voiceReceiveInfosList() {
                inv.list(this.voiceReceiveInfo).then((response) => {
                        this.voiceReceiveInfos = response.data.data;
                    });
            },
            update(rece){
                console.log(rece)
                inv.update(rece).then((re) => {
                    if (re.data.data==1){
                        this.$message.success("修改成功!");
                        this.voiceReceiveInfosList()
                        this.worklog=1
                    } else {
                        this.$message.error("修改失败!");
                    }
                });
            },
            //新增
            add() {
                this.$router.push({ path: "/InvoiceReceiveInfoAdd" });
            },
            //定义导出Excel表格事件
            exportExcel() {
                /* 从表生成工作簿对象 */
                let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        //Blob 对象表示一个不可变、原始数据的类文件对象。
                        //Blob 表示的不一定是JavaScript原生格式的数据。
                        //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                        //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                        new Blob([wbout], { type: "application/octet-stream" }),
                        //设置导出文件名称
                        "收票登记列表.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            //打印
            dy() {
                window.print();
            }
        },

        created() {
            this.voiceReceiveInfosList();
            this.getopenCompany();
            this.getreceiveCompanys();
        }
    };
</script>
